<template>
  <div id="customer">
    <!-- 按钮  -->
    <div class="Top">
    <div class="btns">
      <el-button size="small" type="primary" @click="handleToAdd"
        >新增</el-button
      >
      <el-button size="small" type="danger" @click="handleToDel"
        >批量删除</el-button
      >   
    </div>
    <div style="display:flex">
       <span style="width:170px;line-height:40px;color: cadetblue">输入大棚名称:</span>
       <el-input v-model="customer.name" placeholder="请输入内容" @change='fuQuery'></el-input>
      </div> 
      </div>
    <!-- /按钮 -->
    <!-- 表格 -->
    <el-table
      :data="list"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55px" />
      <el-table-column prop="name" label="大棚名称"></el-table-column>
      <el-table-column prop="area" label="占地面积"></el-table-column>
      <el-table-column prop="temp" label="室内温度"></el-table-column>
      <el-table-column prop="type" label="温度提示"></el-table-column>
      <el-table-column prop="vegetable" label="种植蔬菜"></el-table-column>
      <el-table-column prop="time" label="统计时间"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="slot">
          <el-button
            type="warning"
            @click.prevent="handleToDelete(slot.row.id)"
            size="mini"
            >删除</el-button
          >
          <el-button
            type="danger"
            @click.prevent="handleToEdit(slot.row)"
            size="mini"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeModel"
    >
      <el-form
        label-position="left"
        ref="customerForm"
        :rules="rules"
        label-width="80px"
        :model="customer"
      >
        <el-form-item label="大棚名称" prop="name">
          <el-input v-model="customer.name"></el-input>
        </el-form-item>
        <el-form-item label="占地面积" prop="area">
          <el-input v-model="customer.area"></el-input>
        </el-form-item>
        <el-form-item label="室内温度" prop="temp">
          <el-input v-model="customer.temp"></el-input>
        </el-form-item>
        <el-form-item label="温度提示" prop="type">
          <el-select v-model="customer.type" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-dropdown>
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for='(item,index) in type' :key='index'>{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </el-form-item>
        <el-form-item label="种植蔬菜" prop="vegetable">
          <el-input v-model="customer.vegetable"></el-input>
        </el-form-item>
        <el-form-item label="统计时间" prop="time">
          <el-input
            v-model="customer.time"
            placeholder="时间格式为yyyy-mm-dd hh:bb"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.prevent="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('customerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- /模态框 -->
    <!-- 分页开始 -->
    <el-pagination
      class="pagination"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="findAllCustomer"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      //  list:[{realname:'张三',telephone:'13522213397',idcard:'140621199712223443'},
      //         {realname:'小明',telephone:'13522114408',idcard:'140123299712223443'},
      //         {realname:'杨溟',telephone:'13272213397',idcard:'140621194312223443'},
      //         {realname:'杨溟',telephone:'13272213397',idcard:'140621194398223443'},],
      title: "",
      customer: {},
      ids: [],
      rules: {
        name: [
          { required: true, message: "大棚名称", trigger: "blur" },
          // { min: 2, max: 6, message: "姓名的字数应该是2-6位" },
        ],
        area: [
          { required: true, message: "请输入占地面积", trigger: "blur" },
          // { min: 2, max: 6, message: "密码的字数应该是2-6位" },
        ],
        temp: [
          { required: true, message: "请输入室内温度", trigger: "blur" },
          // { min: 11, max: 11, message: "电话号的字数应该是11位" },
          // {type:"number", message:"电话号应该是数字"}
        ],
        time: [
          { required: true, message: "请输入统计时间",trigger: "blur",},
        ],
         vegetable: [
          { required: true, message: "请输入种植的蔬菜",trigger: "blur",},
        ],
      },
    };
  },
  created() {
    this.findAllCustomer();
  },
  computed: {
    ...mapState("customer", [
      "loading",
      "total",
      " message",
      "list",
      "listQuery",
      "type",
    ]),
  },
  methods: {
    ...mapActions("customer", {
      findAllCustomer: "findAll",
      openModel: "openModel",
      saveOrUpdateCustomer: "saveOrUpdate",
      deleteCustomerById: "deleteById",
      handleToBatchDel: "handleToBatchDelete",
      fuzzyQuery:'fuzzyQuery'
    }),
    confirmTelephone() {
      if (!/^1[0-9]{10}$/.test(this.waiter_info.telephone))
        this.waiter_info.telephone = "";
    },
    // 模糊查询
    fuQuery(){
        this.fuzzyQuery({page: 1,pageSize:10,name: this.customer.name})
    },
    closeModel() {
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleToAdd() {
      this.dialogVisible = true;
      this.title = "新增大棚信息";
      //重置customer
      this.customer = {};
      //   this.openModel();
    },
    //  获取id
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
    },
    //批量删除
    handleToDel() {
      this.handleToBatchDel(this.ids);
    },
    //删除
    handleToDelete(id) {
      this.deleteCustomerById(id).then(() => {
        this.$notify({
          title: "成功",
          message: this.message,
          type: "success",
        });
      });
    },
    handleToEdit(row) {
      this.title = "修改大棚信息";
      //   this.openModel();
      this.dialogVisible = true;
      //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      // this.$refs.customerForm.resetFields();
      this.customer = row;
    },
    handleSubmit(customerForm,item) {
      //提交之前先去执行校验操作

      // console.log(customerForm,"---------")
      this.$refs[customerForm].validate((valid) => {
        if (valid) {
          //校验通过
          this.customer.id
          this.saveOrUpdateCustomer(this.customer).then((result) => {
            console.log('-----',result)
            this.$notify({
              title: "成功",
              message: this.$store.state.customer.message,
              type: "success",
            });
            this.findAllCustomer();
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.btns {
  margin-top: 20px;
  margin-left: 10px;
}
#customer {
  padding: 20px;
}
.pagination {
  /* position: absolute; */
  /* bottom: 50px; */
  margin-top: 20px;
  margin-left: 30px;
}
.Top{
  display: flex;
  color: rgb(233, 141, 4);
  justify-content: space-between;
}
</style>